<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>字典管理</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="addShow" class="animated fadeInRight">
    <el-form ref="form" :model="form" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="项目类型">
           <el-input v-model="form.keyType" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="项目名称">
            <el-input v-model="form.keyName" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="配置的值">
            <el-input v-model="form.keyValue" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit" v-show="resourceMap.queryDicInfo">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="NewAdd" v-show="resourceMap.saveDicInfo">新增</el-button>
      <el-button type="primary" size="small" icon="el-icon-delete" @click="onSelectDel" v-show="resourceMap.deleteDicInfo">删除选中</el-button>
    </div>
    <br>
    <!-- table -->
    <el-table :data="tableData.list" border size="small" :max-height="windowHeight" style="width: 100%"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="desc" sortable label="字典描述"></el-table-column>
      <el-table-column prop="keyName"  label="下拉名称"></el-table-column>
      <el-table-column prop="keyType"  label="下拉类型"></el-table-column>
      <el-table-column prop="keyValue" label="下拉的值"></el-table-column>
      <el-table-column prop="gmt_modified" sortable label="修改时间" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)" v-show="resourceMap.updateDicInfo">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[20,50,100,150,200]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="tableData.totalElement">
    </el-pagination>
    <!-- dialog NewAdd -->
    <el-dialog title="权限配置" :visible.sync="dialogNewAdd" :before-close="beforeClose">
      <el-form :model="formDialogAdd">
        <el-row>
          <el-col :xs="24" :sm="18" :lg="12">
            <el-form-item label="字典描述" :label-width="formLabelWidth">
              <el-input v-model="formDialogAdd.desc" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="18" :lg="12">
            <el-form-item label="下拉类型" :label-width="formLabelWidth">
              <el-input v-model="formDialogAdd.keyType" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="18" :lg="12">
            <el-form-item label="下拉名称" :label-width="formLabelWidth">
              <el-input v-model="formDialogAdd.keyName" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="18" :lg="12">
            <el-form-item label="下拉的值" :label-width="formLabelWidth">
              <el-input v-model="formDialogAdd.keyValue" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="beforeClose" size="small">取 消</el-button>
        <el-button type="primary" @click="newAddSubmit" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- dialog Information -->
    <el-dialog title="详细信息" :visible.sync="dialogInfo">
      <el-form :model="formDialogInfo" class="el-table-expand el-form--inline">
        <el-form-item label="用户名">
          <span>{{ formDialogInfo.nickName }}</span>
        </el-form-item>
        <el-form-item label="角色">
          <span>{{ formDialogInfo.role }}</span>
        </el-form-item>
        <el-form-item label="登录密码">
          <span>{{ formDialogInfo.password }}</span>
        </el-form-item>
        <el-form-item label="邮箱">
          <span>{{ formDialogInfo.email }}</span>
        </el-form-item>
        <el-form-item label="是否激活">
          <span>{{ formDialogInfo.inUse?'是':'否'}}</span>
        </el-form-item>
        <el-form-item label="修改时间">
          <span>{{ formDialogInfo.gmt_modified }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          addShow:false,
          resourceMap:storageLocal.getName('dic'),
          tableData: [],
          form: {},
          dialogNewAdd: false,
          formDialogAdd: {},
          formLabelWidth: '120px',
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 220,
          multipleSelection:[],
          dialogInfo:false,
          formDialogInfo: {},
          currentPage:1,
          pageSize:50
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.addShow = true
      },
      methods: {
          NewAdd:function(){
            this.formDialogAdd = {}
            this.dialogNewAdd = true
          },
          onSubmit:function() {//查询提交
            this.currentPage = 1;
            this.requestModel()
          },
          handleSelectionChange:function(val){
            this.multipleSelection = val;
          },
          newAddSubmit:function(){//新增用户,更新用户 -- 提交
            var data = {
              id: this.formDialogAdd.id?this.formDialogAdd.id:'',
              gmt_create: this.formDialogAdd.gmt_create?this.formDialogAdd.gmt_create:'',
              keyType:this.formDialogAdd.keyType,
              keyName:this.formDialogAdd.keyName,
              keyValue:this.formDialogAdd.keyValue,
              desc:this.formDialogAdd.desc
            }
            if(data.id != ''){//更新 
              resourceRequst("/dic/updateDicInfo",data,function(res){
                  vm.$message({message: '修改成功',type: 'success'});
                  vm.requestModel()
              })
            }else{//新增
              resourceRequst("/dic/saveDicInfo",data,function(res){
                  vm.tableData.list.unshift(res.getResult);
                  vm.$message({
                    message: '添加成功',
                    type: 'success'
                  });
              })
            }
            vm.dialogNewAdd = false;
          },
          onSelectDel:function() {//删除操作
            if(this.multipleSelection.length == 0){
              this.$message({ showClose: true, message: '提示，还未选中对象', type: 'warning', duration:1500 });
              return
            }
            var arry = _.map(vm.multipleSelection, function(num){ 
              return num.id; 
            });
            this.$alert('此操作将删除选中数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:true,
              type: 'warning',
              callback: function(action){
                if (action == "confirm") {
                  var data = {allKeys:arry}
                  resourceRequst("/dic/deleteDicInfo",data,function(res){
                    var table = _.filter(vm.tableData.list, function(item){ 
                      return arry.indexOf(item.id) < 0 
                    });
                    vm.tableData.list = table;
                    vm.$message({ type: 'success', message: "删除成功！" });
                  })
                }
              }
            });
          },
          handleEdit:function(index, row) {//编辑
            row.index = index;
            cookieUtil.setCookie('active_dic',row,1)
            this.formDialogAdd = row;
            this.dialogNewAdd = true;
          },
          beforeClose:function(){
            var data = cookieUtil.getCookie('active_dic')
            if(data){
              vm.tableData.list.splice(data.index,1,data)
              this.dialogNewAdd = false;
              cookieUtil.removeCookie('active_dic')
            }else{
              this.dialogNewAdd = false;
            }
          },
          handleInfo:function(index, row) {//详情
            this.dialogInfo = true
            this.formDialogInfo = row
          },
          handleSizeChange:function(val) {
           this.pageSize = val;
           this.requestModel()
          },
          handleCurrentChange:function(val) {
            this.requestModel()
          },
          requestModel:function(){
            var data = {
              "keyType":this.form.keyType?this.form.keyType:'', 
              "keyName":this.form.accessCode?this.form.keyName:'', 
              "keyValue":this.form.keyValue?this.form.keyValue:'', 
              "page":this.currentPage -1 ?this.currentPage -1 :'',
              "pageSize":this.pageSize?this.pageSize:''
            }
            resourceRequst("/dic/queryDicInfo",data,function(res){
                vm.tableData = res.getResult
            })
          }
      }
    })
  </script>
</html>